<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: yyh
 * @LastEditTime: 2021-09-24 14:51:55
-->
<template>
  <div class="header">
    <!-- 顶部 -->
    <div class="header_top">
      <div class="wrapper">
        <!-- 左边 -->
        <div class="left">xxx网站欢迎您</div>
        <!-- 右边 -->
        <div class="right">
          <div class="search-box">
            <input class="search" type="text" placeholder="请输入" />
            <div class="search-button">搜索</div>
          </div>
          <!-- 图标 -->
          <ul class="icon">
            <li><img src="../../assets/phone.png" alt="" /></li>
            <li>
              <div class="a1">
                <img src="../../assets/wxicon.png" alt="" />
                <div class="wxewm">
                  <img src="../../assets/wxewm.jpg" alt="" />
                </div>
              </div>
            </li>
            <li>
              <a href="https://weibo.com/u/6868236398?is_all=1"
                ><img src="../../assets/wbicon.png" alt=""/>
              </a>
            </li>
            <li>
              <div class="a3">
                <img src="../../assets/dyicon.png" alt="" />
                <div class="dyewm">
                  <img src="../../assets/dyewm.png" alt="" />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="header_bottom">
      <div class="wrapper">
        <!-- logo -->
        <div class="logo" @click="toHome()">
          <img src="../../assets/GXUST.png" alt="" />
        </div>
        <!-- 菜单栏 -->
        <ul class="menu">
          <li @click="toHome()">首页</li>
          <li @click="toList(c)" v-for="c in categories" :key="c.id">
            {{ c.name }}
          </li>
        </ul>
        <!-- logo2 -->
        <div class="logo2">
          <img src="../../assets/txt.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "../../utils/request";
export default {
  data() {
    return {
      categories: [],
    };
  },
  computed: {},
  methods: {
    //请求栏目数据
    getCategoriesData() {
      get("/index/category/findAll").then((res) => {
        // console.log(res.data);
        this.categories = res.data;
      });
    },
    //跳转到列表页
    toList(category) {
      //路由跳转
      this.$router.push({
        //要跳转的路径
        path: "/list",
        //要传递的参数
        query: category,
      });
    },
    toHome() {
      this.$router.push("/");
    },
  },
  created() {
    this.getCategoriesData();
  },
  mounted() {},
};
</script>
<style lang='scss' scoped>
// 头部样式
.header {
  color: white;
  // 头部顶部的样式
  .header_top {
    background-color: #2b4087;
    // wrapper容器
    .wrapper {
      // 左边样式
      .left {
        font-size: 20px;
        float: left;
      }
      // 右边样式
      .right {
        float: right;
        // 搜索框样式
        .search-box {
          float: left;
          margin-top: 8px;
          display: flex;
          // 输入框样式
          .search {
            height: 22px;
            border: 1px solid #fff;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            outline: none;
          }
          // 搜索按钮
          .search-button {
            width: 40px;
            height: 24px;
            line-height: 24px;
            color: #fff;
            text-align: center;
            border: 1px solid #fff;
            background-color: #2b4087;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            cursor: pointer;
          }
        }
        // 图标样式
        .icon {
          margin-left: 10px;
          margin-top: 6px;
          float: left;
          display: flex;
          li {
            margin-left: 10px;
            cursor: pointer;
            .a1 {
              position: relative;
              .wxewm {
                position: absolute;
                width: 85px;
                height: 85px;
                background-color: #fff;
                border: 1px solid #ddd;
                top: 30px;
                left: -30px;
                display: none;
                img {
                  width: 75px;
                  height: 75px;
                  padding: 5px 5px;
                }
              }
            }
            .a1:hover {
              .wxewm {
                display: block;
              }
            }
            .a3 {
              position: relative;
              .dyewm {
                position: absolute;
                width: 85px;
                height: 85px;
                background-color: #fff;
                border: 1px solid #ddd;
                top: 30px;
                left: -30px;
                display: none;
                img {
                  width: 75px;
                  height: 75px;
                  padding: 5px 5px;
                }
              }
            }
            .a3:hover {
              .dyewm {
                display: block;
              }
            }
          }
        }
      }
      // 行高
      .left,
      .right {
        line-height: 2em;
      }
    }
    // wrapper清除浮动
    .wrapper::after {
      display: block;
      content: "";
      clear: both;
    }
  }
  // 头部底部的样式
  .header_bottom {
    background-color: #324999;
    // margin-top: 10px;
    .wrapper {
      // 开启flex布局
      display: flex;
      justify-content: space-between;
      // logo样式
      .logo {
        flex: 1;
        cursor: pointer;
        img {
          margin-top: 8px;
          width: 250px;
          height: 60px;
        }
      }
      // 菜单栏样式
      .menu {
        flex: 2;
        li {
          float: left;
          line-height: 60px;
          padding: 8px 0.5em;
          font-size: 20px;
          cursor: pointer;
        }
      }
      .logo2 {
        flex: 1;
        margin-top: 18px;
      }
    }
  }
}
</style>